<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lbxi科技网</title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/welcome.css">
    <link rel="stylesheet" type="text/css" media="(min-width:1024px) and (max-width:1102px)" href="./css/media/min1024.css">
    <style>
        @media screen and (min-width:768px) and (max-width:1023px) and (orientation: portrait){
            .nav .nav-list{
                line-height:110px
            }
            .nav-list .list-add{
                position: relative;;
                font-size:12px
            }
            .nav{
                height:75px;
                background-size:90%
            }
          
            .nav-list .list-add a{
                position: absolute;
                top:-25px;
                left:6px
            }
        }
    </style>
    <style>
            @media screen and (min-width:414px) and (max-width:765px) and (orientation: portrait){
                body{
                    padding:20px 7px;
                    margin:30px 0px
                }
                #all{
                    border:1px solid red;
                    padding:20px 0px;
                    width:400px;
                    margin:0
                }
                .nav .nav-list{
                    line-height:10px;
                    width:66px;
                    flex: none;
                }
                .nav-list .list-add{
                    position: relative;;
                    font-size:14px;
                    width:89px;
                    height:92px
                }
                .nav-list .list-add a{
                    position: absolute;
                    top:24px;
                    left:-2px;
                }
                .nav .work{
                    display:none
                }
                .nav-list .list-add{
                    width:59px;
                    height:62px

                }
                #content{
                    width:100px
                }
                .nav{
                    width:440px;
                    height:61px
                }
                .nav .nav-list:nth-child(1){
                    margin-left:13px
                }
                #marquee-content{
                    width:358px;
                    margin-left:20px
                }
                
             
            }
        </style>
    <style>
            @media screen and (max-width:413px) and (orientation: portrait){
                body{
                    padding:20px 2px;
                    margin:30px 0px
                }
                #all{
                    border:1px solid red;
                    padding:20px 0px;
                    width:362px;
                    margin:0
                }
                #marquee-txt{
                    width:360px
                }
                #marquee-txt img{
                    width:256px !important
                }
                .nav .nav-list{
                    line-height:10px;
                    width:61px;
                    flex: none;
                }
                .nav-list .list-add{
                    position: relative;;
                    font-size:12px;
                    width:89px;
                    height:92px
                }
                .nav-list .list-add a{
                    position: absolute;
                    top:24px;
                    left:3px;
                }
                .nav .work{
                    display:none
                }
                .nav-list .list-add{
                    width:59px;
                    height:62px

                }
                #content{
                    width:100px
                }
                .nav{
                    width:440px;
                    height:61px
                }
                .nav .nav-list:nth-child(1){
                    margin-left:7px
                }
                #marquee-content{
                    width:272px;
                    margin-left:44px
                }
                
             
            }
        </style>
        <style>
                @media screen and (max-width:374px) and (orientation: portrait){
                    body{
                    padding:20px 0px;
                }
                #all{
                    margin:0
                }
                #marquee-txt{
                    width:315px
                }
                .nav .nav-list{
                    margin-right:2px
                }
                .nav .nav-list:nth-child(1){
                    margin-left:1px
                }
                #marquee-content{
                    width:272px;
                    margin-left:22px
                }
                
             
            }
        </style>
</head>
<body style=" background-repeat:no-repeat ;background-size:100% 100%; background-attachment: fixed;opacity:0.8" >
    <div id="all" class="containers">
        <div id="content">
                    <div id="marquee-txt">
                        <img src="image/Polygon practice/1.jpg" style="width:360px;height:200px">
                        <marquee id="marquee-content">welcome to Lbxin科技网</marquee>
                    </div>
        </div>
        <!--旧版幽灵式-->
            <!--<div id="div-btn">
                <div id="div-group" class="home">
                    <div id="div-top"></div>
                        <a href="about.html">Home Page</a>
                    <div id="div-bottom"></div>
                </div>
                <div id="div-group" class="case">
                    <div id="div-top"></div>
                        <a href="./example/music.html">Small Case</a>
                    <div id="div-bottom"></div>
                </div>
            </div>
        -->
        <div id="app" class="nav">
            <div class="nav-list" :class="listitem.className"  v-for="listitem in listitems" :style="{backgroundImage:'url(' + listitem.src + ')'}">
                    <span class="list-add" ><a :href="listitem.href">{{listitem.listadd}}</a></span>
            </div>
            <!--<div class="pdAds">
                <div class="pdAdsTop"></div>
                <div class="pdAdsBtm"></div>
            </div>
        -->
        </div>
    </div>
  <script>
      var app=new Vue({
          el:"#app",
          data:{
              listitems:[
                  {listadd:"我的简历",src:"./image/welcome/resume.png",href:"resume.html"},
                  {listadd:"我的工作",src:"./image/welcome/work.png",className:'work'},
                  {listadd:"我的主页",src:"./image/welcome/homepage.png",href:"index.html"},
                  {listadd:"我的书架",src:"./image/welcome/bookshelf.png",href:"bookshelf.html"},
                  {listadd:"我的作品",src:"./image/welcome/production.png",className:'production'},
                  {listadd:"社区推荐",src:"./image/welcome/Community.png",href:"Community.html"}
              ]
          }
      })
  </script>
</body>
</html>
